<template>
    <div>
        <el-button type="primary" @click="handleAddPos">增加门店</el-button>
        <div style="margin-top: 15px;">
            <el-input
                placeholder="请输入内容"
                v-model="search.value"
                class="input-with-select"
                style="width:500px"
            >
                <el-select v-model="select" slot="prepend" placeholder="请选择" @change="changeType">
                    <el-option label="店名" value="name"></el-option>
                    <el-option label="门店状态" value="state"></el-option>
                    <el-option label="联系电话" value="phone"></el-option>
                </el-select>
                <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table :data="posList" stripe style="width: 100%" highlight-current-row border>
            <el-table-column prop="name" label="店名" align="center"></el-table-column>
            <el-table-column prop="licenseNumber" label="营业执照号码" align="center"></el-table-column>
            <el-table-column label="营业执照图片" align="center">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.licenseImg"
                        :preview-src-list="[scope.row.licenseImg]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column prop="x" label="经度" align="center"></el-table-column>
            <el-table-column prop="y" label="纬度" align="center"></el-table-column>
            <el-table-column prop="city" label="所在城市" align="center"></el-table-column>
            <el-table-column prop="corporation" label="法人" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
            <el-table-column label="头像" align="center">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.headImg"
                        :preview-src-list="[scope.row.headImg]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="feature" label="特色" align="center"></el-table-column>
            <el-table-column prop="vip" label="vip等级" align="center"></el-table-column>
            <el-table-column prop="commission" label="佣金比例" align="center"></el-table-column>
            <el-table-column label="店员属性" align="center">
                <template slot-scope="scope">
                    <el-popover placement="right" width="400" trigger="click">
                        <el-button slot="reference" type="primary">查看店员</el-button>
                        <el-table :data="scope.row.clerks">
                            <el-table-column property="name" label="姓名"></el-table-column>
                            <el-table-column property="tel" label="电话"></el-table-column>
                            <el-table-column property="age" label="年龄"></el-table-column>
                        </el-table>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="clerks" label="审核状态" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 0" effect="plain">审核中</el-tag>
                    <el-tag v-if="scope.row.state == 1" effect="plain" type="success">已通过</el-tag>
                    <el-tag v-if="scope.row.state == 2" effect="plain" type="danger">未通过</el-tag>
                    <el-tag v-if="scope.row.state == 3" effect="plain" type="danger">封禁</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-row>
                        <el-link type="warning" @click="handleUpdate(scope.row._id)">
                            修改
                            <i class="el-icon-view el-icon--right"></i>
                        </el-link>
                    </el-row>
                    <el-row>
                        <el-link type="danger" @click="handleDel(scope.row._id)">
                            删除
                            <i class="el-icon-view el-icon--right"></i>
                        </el-link>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-for-pos-list">
            <el-pagination
                @size-change="handlePageForPosList"
                @current-change="handlePageForPosList"
                :current-page.sync="parForPosList.curPage"
                layout="prev, pager, next, jumper"
                :total="totalForPosList"
            ></el-pagination>
        </div>
        <!-- add pos -->
        <el-dialog width="40%" title="增加门店" :visible.sync="visForAddPos" center>
            <el-form
                :model="parForAddPos"
                ref="parForAddPos"
                :rules="rulesForAddPos"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="门店名" prop="name" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="营业执照号码" prop="licenseNumber" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.licenseNumber"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="营业执照图片" prop="licenseImg" label-width="150px">
                    <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :show-file-list="false"
                        :on-success="handleLicenseImgSuccess"
                        :before-upload="beforeImgUpload"
                    >
                        <img v-if="uploadImg.licenseImg" :src="uploadImg.licenseImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="地址" prop="address" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.address"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="经度" prop="x" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.x" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="y" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.y" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.city" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="法人" prop="corporation" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.corporation"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.phone" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="headImg" label-width="150px">
                    <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :show-file-list="false"
                        :on-success="handleHeadImgSuccess"
                        :before-upload="beforeImgUpload"
                    >
                        <img v-if="uploadImg.headImg" :src="uploadImg.headImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="特色" prop="feature" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.feature"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="vip等级" prop="vip" label-width="150px">
                    <el-input type="text" v-model="parForAddPos.vip" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="佣金比例" prop="commission" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.commission"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="店员姓名" prop="assistant" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.clerks[0].name"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="店员手机号" prop="tel" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.clerks[0].tel"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="店员年龄" prop="age" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForAddPos.clerks[0].age"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="门店状态" prop="state" label-width="150px">
                    <el-radio-group v-model="addradio" @change="addstateChange">
                        <el-radio :label="0">待审核</el-radio>
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">不通过</el-radio>
                        <el-radio :label="3">封禁</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleForAddPosCancel">取消</el-button>
                    <el-button type="primary" @click="handleForAddPosRight">确定</el-button>
                    <el-button type="primary" @click="handleForAddPosReset('parForAddPos')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- up-pos -->
        <el-dialog width="40%" title="修改门店" :visible.sync="visForupPos" center>
            <el-form
                :model="parForUpPos"
                ref="parForUpPos"
                :rules="rulesForUpPos"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="门店名" prop="name" label-width="150px">
                    <el-input type="text" v-model="parForUpPos.name" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="营业执照号码" prop="licenseNumber" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.licenseNumber"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="营业执照图片" prop="licenseImg" label-width="150px">
                    <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :show-file-list="false"
                        :on-success="handleLicenseImg"
                        :before-upload="beforeImgUpload"
                    >
                        <img
                            v-if="parForUpPos.licenseImg"
                            :src="parForUpPos.licenseImg"
                            class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="地址" prop="address" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.address"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="经度" prop="x" label-width="150px">
                    <el-input type="text" v-model="parForUpPos.x" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="y" label-width="150px">
                    <el-input type="text" v-model="parForUpPos.y" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city" label-width="150px">
                    <el-input type="text" v-model="parForUpPos.city" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="法人" prop="corporation" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.corporation"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone" label-width="150px">
                    <el-input type="text" v-model="parForUpPos.phone" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="headImg" label-width="150px">
                    <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :show-file-list="false"
                        :on-success="handleHeadImg"
                        :before-upload="beforeImgUpload"
                    >
                        <img v-if="parForUpPos.headImg" :src="parForUpPos.headImg" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="特色" prop="feature" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.feature"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="vip等级" prop="vip" label-width="150px">
                    <el-input type="text" v-model="parForUpPos.vip" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="佣金比例" prop="commission" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.commission"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="店员姓名" prop="name" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.clerks[0].name"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="店员手机号" prop="tel" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.clerks[0].tel"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="店员年龄" prop="age" label-width="150px">
                    <el-input
                        type="text"
                        v-model="parForUpPos.clerks[0].age"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="门店状态" prop="state" label-width="150px">
                    <el-radio-group v-model="radio" @change="stateChange">
                        <el-radio :label="0">待审核</el-radio>
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">不通过</el-radio>
                        <el-radio :label="3">封禁</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleForUpPosCancel">取消</el-button>
                    <el-button type="primary" @click="handleForUpPosRight">确定</el-button>
                    <el-button type="primary" @click="handleForUpPosReset('parForUpPos')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getPosList, updatePos, delPos, addPos, searchPos, uoploadPos, getone } from '@/api/pos.js';
import { log } from 'util';
export default {
    data() {
        return {
            addradio:"",
            radio:"",
            select: '',
            url: this.globalConfig.UPLOAD_URL,
            parForPosList: {
                curPage: 1,
                eachPage: 10
            },
            posList: [],
            search: {
                type: '',
                value: '',
                curPage: 1,
                eachPage: 10
            },
            totalForPosList: 0,
            visForAddPos: false,
            visForupPos: false,
            parForAddPos: {
                state: '',
                name: '',
                licenseNumber: '',
                licenseImg: '',
                address: '',
                x: '',
                y: '',
                city: '',
                corporation: '',
                phone: '',
                headImg: '',
                feature: '',
                vip: '',
                commission: '',
                clerks: [
                    {
                        name: '',
                        tel: '',
                        age: ''
                    }
                ]
            },
            parForUpPos: {
                state: '',
                name: '',
                licenseNumber: '',
                licenseImg: '',
                address: '',
                x: '',
                y: '',
                city: '',
                corporation: '',
                phone: '',
                headImg: '',
                feature: '',
                vip: '',
                commission: '',
                clerks: [
                    {
                        name: '',
                        tel: '',
                        age: ''
                    }
                ]
            },
            rulesForAddPos: {
                name: [{ required: true, message: '门店名不能为空', trigger: 'blur' }],
                licenseNumber: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
                licenseImg: [{ required: true, message: '请上传营业执照图片', trigger: 'blur' }],
                address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
                x: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
                y: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
                city: [{ required: true, message: '城市名不能为空', trigger: 'blur' }],
                corporation: [{ required: true, message: '法人不能为空', trigger: 'blur' }],
                phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
                headImg: [{ required: true, message: '请上传头像', trigger: 'blur' }],
                feature: [{ required: true, message: '特色不能为空', trigger: 'blur' }],
                vip: [{ required: true, message: 'vip等级不能为空', trigger: 'blur' }],
                commission: [{ required: true, message: '佣金比例不能为空', trigger: 'blur' }],
                // assistant: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                // tel: [{ required: true, message: '店员电话不能为空', trigger: 'blur' }],
                // age: [{ required: true, message: '店员年龄不能为空', trigger: 'blur' }]
            },
            rulesForUpPos: {
                name: [{ required: true, message: '门店名不能为空', trigger: 'blur' }],
                licenseNumber: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
                licenseImg: [{ required: true, message: '请上传营业执照图片', trigger: 'blur' }],
                address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
                x: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
                y: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
                city: [{ required: true, message: '城市名不能为空', trigger: 'blur' }],
                corporation: [{ required: true, message: '法人不能为空', trigger: 'blur' }],
                phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
                headImg: [{ required: true, message: '请上传头像', trigger: 'blur' }],
                feature: [{ required: true, message: '特色不能为空', trigger: 'blur' }],
                vip: [{ required: true, message: 'vip等级不能为空', trigger: 'blur' }],
                commission: [{ required: true, message: '佣金比例不能为空', trigger: 'blur' }]
            },
            uploadImg: {
                licenseImg: '',
                headImg: ''
            }
        };
    },
    created() {
        this.getPosListData(this.parForPosList);
    },
    methods: {
        addstateChange(v){
            this.parForAddPos.state=v;
        },
        stateChange(v){
            this.parForUpPos.state=v;
        },
        changeType(v) {
            this.search.type = v;
        },
        //search
        handleSearch() {
            if (this.search.type && this.search.value) {
                this.getPosListData(this.search);
            } else {
                this.getPosListData(this.parForPosList);
            }
        },
        //upd
        handleUpdate(_id) {
            this.visForupPos = true;
            getone({ _id }).then(res => {
                this.parForUpPos = res[0];
                this.radio=this.parForUpPos.state;
            });
        },
        //确定修改
        handleForUpPosRight() {
            updatePos(JSON.stringify(this.parForUpPos)).then(res => {
            });
            this.visForupPos = false;
            this.getPosListData(this.parForPosList);
        },
        //del
        handleDel(_id) {
            delPos({ _id });
            this.getPosListData(this.parForPosList);
        },

        //reset
        handleForAddPosReset(form) {
            this.$refs[form].resetFields();
        },
        handleForUpPosReset(form) {
            this.$refs[form].resetFields();
        },
        //submit
        handleForAddPosRight() {
            this.visForAddPos = false;
            addPos(JSON.stringify(this.parForAddPos)).then(res => {});
            this.getPosListData(this.parForPosList);
        },
        handleForUpPosCancel() {
            this.visForupPos = false;
        },
        //cancel
        handleForAddPosCancel() {
            this.visForAddPos = false;
        },
        handleLicenseImg(res, file, fileList) {
            this.parForUpPos.licenseImg = 'http://localhost:3001' + file.response;
        },
        handleHeadImg(res, file, fileList) {
            this.parForUpPos.headImg = 'http://localhost:3001' + file.response;
        },
        handleHeadImgSuccess(res, file, fileList) {
            this.uploadImg.headImg = URL.createObjectURL(file.raw);
            this.parForAddPos.headImg = 'http://localhost:3001' + file.response;
        },
        handleLicenseImgSuccess(res, file, fileList) {
            this.uploadImg.licenseImg = URL.createObjectURL(file.raw);
            this.parForAddPos.licenseImg = 'http://localhost:3001' + file.response;
        },
        beforeImgUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //add
        handleAddPos() {
            this.visForAddPos = true;
        },
        //page
        handlePageForPosList(e) {
            if (this.search.type && this.search.value) {
                this.search.curPage = e;
                this.getPosListData(this.search);
            } else {
                this.parForPosList.curPage = e;
                this.getPosListData(this.parForPosList);
            }
        },
        //getData
        getPosListData(params) {
            getPosList(params).then(res => {
                let { total, rows, curPage, eachPage } = res;
                this.totalForPosList = total;
                this.posList = rows;
            });
        }
    }
};
</script>

<style scoped>
.page-for-pos-list {
    padding: 20px 0;
    text-align: right;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>